<template>
  <div class="card-phone-panel" @click="onLayoutClick">
    <div class="card-phone-panel-box">
      <div class="card-phone-panel-box-close">
        <el-icon><close /></el-icon>
      </div>

      <div v-if="panelLists.length > 0" class="card-phone-panel-box-list">
        <CardPhoneTransition :list="panelLists">

          <template v-slot:node="{ item, index }">
            <PanelItemDrag :key="item.itemid" :item="item" :index="index" :draggable="true">
              <component :index="index" :item="item" :is="'Panel' + item.panel_type"></component>
            </PanelItemDrag>
          </template>

        </CardPhoneTransition>
      </div>
    </div>
  </div>
</template>

<script>
  import { defineAsyncComponent } from 'vue';
  import PanelComponentsGather from '@/views/card/js/mixins/panel-components-gather.js';
  import PanelCommonComputed from '@/views/card/js/mixins/panel-common-computed.js';
  export default {
    name: 'CardPhonePanel',
    mixins: [PanelCommonComputed, PanelComponentsGather],
    components: {
      'CardPhoneTransition': defineAsyncComponent(() => import('@/views/card/content/CardPhoneTransition.vue')),
      'PanelItemDrag': defineAsyncComponent(() => import('@/views/card/panel/PanelItemDrag.vue')),
    },
    methods: {
      onLayoutClick() {
        this.updatePanelCurTarget({
          itemId: null,
          parentId: null,
        });
      },
    }
  }
</script>

<style lang="scss">
  @import '@/assets/css/panel.scss';
</style>
